<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <ComfirmSearchBar @search="handleSearch" :currentPage="currentPage" :pageSize="pageSize" />
      </div>
    </template>
    <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%" height="440" @row-click="handleRowClick">
      <!-- table部分 -->
      <el-table-column prop="airQualityId" label="#" width="60px" />
      <el-table-column prop="province" label="省份">
        <template #default="scope">
          {{ scope.row.province }}
        </template>
      </el-table-column>
      <el-table-column prop="city" label="城市">
        <template #default="scope">
          {{ scope.row.city }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址">
        <template #default="scope">
          {{ scope.row.address }}
        </template>
      </el-table-column>
      <el-table-column prop="rankId" label="AQI等级">
        <template #default="scope">
          <p v-if="scope.row.rankId == '1'" style="color: #67c23a">优（一）</p>
          <p v-if="scope.row.rankId == '2'" style="color: #ffff00">良好（二）</p>
          <p v-if="scope.row.rankId == '3'" style="color: #ffa500">轻度污染（三）</p>
          <p v-if="scope.row.rankId == '4'" style="color: #ff0000">中度污染（四）</p>
          <p v-if="scope.row.rankId == '5'" style="color: #800080">重度污染（五）</p>
          <p v-if="scope.row.rankId == '6'" style="color: #800000">严重污染（六）</p>
        </template>
      </el-table-column>
      <el-table-column prop="confirmDate" label="确认日期" />
      <!-- <el-table-column prop="confirmTime" label="确认时间" /> -->
      <el-table-column prop="gridManName" label="网格员">
        <template #default="scope">
          {{ scope.row.gridManName }}
        </template>
      </el-table-column>
      <el-table-column prop="supervisorName" label="反馈者姓名">
        <template #default="scope">
          {{ scope.row.supervisorName }}
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="text-align: -webkit-center">
      <div style="margin-right: 30px">
        <el-config-provider :locale="locale">
          <el-pagination
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :small="small"
            :page-sizes="[3, 6, 7, 8, 9, 10]"
            :background="background"
            layout="prev, pager, next, jumper,sizes,total"
            v-model:total="total"
            @current-change="handleCurrentChange"
            @size-change="handleCurrentChange"
            style="width: max-content; margin-top: 50px"
          />
        </el-config-provider>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
import { Avatar, Edit, Location, Tickets, UserFilled, Clock } from '@element-plus/icons-vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import $axios from '../utils/axios'
import ComfirmSearchBar from './ComfirmSearchBar.vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))

const size = ref('')
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px'
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default
  }
})

//斑马条样式
const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 === 1 ? 'success-row' : ''
}

const tableData = ref([])

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref('')
const background = ref(true)

// 初始化
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10
})
const handleCurrentChange = async () => {
  // const path = `/statistics/findAllByPage/${currentPage.value}/${pageSize.value}` //ES6写法
  const path = '/api/feedback/queryQuality'
  const response = await $axios.post(path, { ...queryParams }, {})
  console.log(queryParams)
  if (response.data.code === '200') {
    console.log(response)
    tableData.value = response.data.data.list
    total.value = response.data.data.total
  }
}
handleCurrentChange()

const handleRowClick = (row) => {
  router.push({ name: 'airQualityDetail', params: { id: row.airQualityId } })
}

//获得子组件条件查询结果
const handleSearch = (data, current, size, tt) => {
  tableData.value = data
  currentPage.value = current
  pageSize.value = size
  total.value = tt
}
</script>

<style scoped>
.box-card {
  width: 99%;
  height: 95%;
  margin-top: 12px;
  border-radius: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.el-descriptions {
  margin-top: 20px;
}

.cell-item {
  display: flex;
  align-items: center;
}

.margin-top {
  margin-top: 20px;
}

.tagclass {
  margin-left: 5px;
  color: black;
  border: none;
}
</style>

<style>
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
